<template>
  <div class="DarkTea">
    <div class="DarkTeaHeader">
      <h2>黑茶种类</h2>
    </div>
    <div class="DarkTeaContent">
      <el-table
        :data="tableObj.temporary"
        @row-click="handleRow"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="index" label="序号" width="150">
        </el-table-column>

        <el-table-column prop="imgPath" label="图片" width="150">
          <template slot-scope="scope">
            <img
              :src="require('/src/assets/img/' + scope.row.imgPath)"
              width="50"
              height="50"
            />
          </template>
        </el-table-column>

        <el-table-column prop="name" label="产品名称" width="180">
        </el-table-column>

        <el-table-column prop="brand" label="品牌" width="180">
        </el-table-column>

        <el-table-column prop="price" label="价格" width="180">
        </el-table-column>

        <!-- <el-table-column
              prop="industry"
              label="茶厂"
              width="180">
            </el-table-column> -->

        <el-table-column prop="username" label="商家" width="180">
        </el-table-column>

        <el-table-column prop="" label="相关操作" width="150">
          <template slot-scope="scope">
            <el-button
              type="success"
              icon="el-icon-circle-plus-outline"
              :disabled="scope.row.store == 0"
              @click="addIntoCar"
              >添加购物车</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <span>页次:</span
        ><span>{{ tableObj.currentPage }}/{{ tableObj.totalPages }}</span
        ><span>页</span><span>每页显示：</span>
        <span>
          <select name="" id="" v-model="tableObj.number" @change="alterNumber">
            <option
              v-for="(item, index) in tableObj.tableData.length > 6
                ? tableObj.tableData.slice(0, 6)
                : tableObj.tableData"
              :key="index"
              :value="index + 1"
            >
              {{ index + 1 }}
            </option>
          </select>
        </span>
        <span>条</span>
        <span>总记录数：</span>
        <span>{{ tableObj.tableData.length }}条</span>

        <span>
          <el-button @click="getFirst"><span>首页</span></el-button>
          <span>
            <el-pagination
              layout="prev, pager, next"
              :page-size="tableObj.number"
              :current-page="tableObj.currentPage"
              @current-change="handleCurrentChange"
              :total="tableObj.tableData.length"
              style="display: inline-block"
            >
            </el-pagination>
          </span>
          <el-button @click="getLast"><span>末页</span></el-button>
        </span>
      </div>
    </div>
    <!-- <div class="DarkTeaFooter">

      </div> -->
  </div>
</template>

<script>
import {
  getRequest,
  changeNumber,
  currentChange,
  getLastPage,
  getFirstPage,
  isLogin,
} from "../../util/tools";
export default {
  name: "DarkTea",
  data() {
    return {
      tableObj: {
        tableData: [],
        number: 2,
        totalPages: 0,
        currentPage: 1,
        temporary: [],
      },
    };
  },
  methods: {
    alterNumber() {
      changeNumber(this.tableObj);
    },

    handleCurrentChange(val) {
      currentChange(val, this.tableObj);
    },

    getFirst() {
      getFirstPage(this.tableObj);
    },

    getLast() {
      getLastPage(this.tableObj);
    },
    //添加购物车
    addIntoCar() {
      if (isLogin(this)) {
        this.timer = setTimeout(() => {
          this.$bus.$emit("teaData", this.rowData);
        }, 0);
      } else {
        if (window.confirm("是否先去登录")) {
          this.$router.push({ name: "login" });
        }
      }
    },
    //处理当行数据
    handleRow(row) {
      //   console.log(row)
      if (this.rowData !== "") {
        this.rowData = "";
      }
      this.rowData = row;
    },
  },
  mounted() {
    getRequest("http://localhost:3000/user/darkTea", this.tableObj);
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
};
</script>

<style scoped lang='less'>
.DarkTea {
  width: 100%;
  min-height: 800px;
  background-color: white;
  // position: absolute;
  .DarkTeaHeader {
    width: 100%;
    height: 60px;
    line-height: 60px;

    h2 {
      color: black;
      margin-left: 20px;
      float: left;
      margin-top: -10px;
      // background-color: rgb(130, 228, 91);
    }
  }
  .DarkTeaContent {
    margin-left: 20px;
    width: 100%;
    .pages {
      margin-top: 30px;
      span {
        margin: 0 15px;
      }
    }
  }
  .DarkTeaFooter {
    width: 86%;
    height: 100px;
    // line-height: 60px;
    position: fixed;
    background-color: wheat;
    bottom: 0;
    margin: -29px;
  }
}
</style>